<template>
  <div>
    <n-form
        ref="formRef"
        :model="sample"
        label-placement="left"
        :label-width="160"
        :style="{
        maxWidth: '640px'
      }"
    >
      <n-form-item label="命名空间">
        {{ sample.namespace }}
      </n-form-item>
      <n-form-item label="集合名称">
        {{ sample.collectionName }}
      </n-form-item>
      <n-form-item label="样本编号">
        {{ sample.sampleId }}
      </n-form-item>
      <n-form-item label="扩展字段">
        <key-value v-model:value="sample.sampleData"/>
      </n-form-item>
    </n-form>
    <face-info v-model:value="faceData" v-model:files="files"/>
    <n-space justify="center">
      <n-button type="primary" @click="handleSubmit">
        <template #icon>
          <n-icon>
            <save-icon/>
          </n-icon>
        </template>
        创建样本
      </n-button>
    </n-space>
  </div>
</template>

<script>
import {v4} from "uuid";
import {useSystemStore} from "@store/system";
import KeyValue from "@component/common/KeyValue";
import {Save as SaveIcon} from '@vicons/ionicons5'
import {createSample} from "@api/sample";
import FaceInfo from "@component/common/FaceInfo";
import {BlobToDataURL} from "@util";
import {createFace} from "@api/face";

const system = useSystemStore();
const sampleId = v4().replace(/-/g, "");
export default {
  name: "SampleCreate",
  components: {FaceInfo, KeyValue, SaveIcon},
  data() {
    return {
      sample: {
        collectionName: system.collection,
        namespace: system.namespace,
        sampleData: system.collectionData.sampleColumns.map((col) => {
          return {key: col.name, value: col.comment}
        }),
        sampleId: sampleId,
      },
      faceData: {
        sampleId: sampleId,
        namespace: system.namespace,
        collectionName: system.collection,
        faceData: system.collectionData.faceColumns.map((col) => {
          return {key: col.name, value: col.comment}
        }),
        faceScoreThreshold: 0,
        imageBase64: null,
        maxConfidenceThresholdWithOtherSample: 50,
        minConfidenceThresholdWithThisSample: 0,
      },
      files: [],
      system: system,
    }
  },
  methods: {
    createFaces() {
      const promises = [];
      this.files.forEach((file) => {
        promises.push(new Promise(((resolve, reject) => {
          BlobToDataURL(file.file, (base64Url) => {
            let b64split = base64Url.split(',')
            base64Url = b64split[1]
            const data = JSON.parse(JSON.stringify(this.faceData));
            data.imageBase64 = base64Url;
            createFace(data).then((res) => {
              resolve(res);
            });
          });
        })));
      });
      Promise.all(promises).then((res) => {
        debugger;
        const error = res.find((r) => r.data.code !== 0);
        if (error) {
          $uiMsg.error("部分人脸数据创建失败：" + error.data.message);
        } else {
          $uiMsg.success("样本创建成功。");
        }
      }).catch((ex) => {
        $uiMsg.error("发生错误。");
      }).finally(() => {
        // debugger;
        // $uiMsg.removeMessage();
      });
    },
    handleSubmit() {
      $uiMsg.loading("正在保存数据...");
      createSample(this.sample).then((res) => {
        if (res.data.code !== 0) {
          $uiMsg.error("创建失败：" + res.data.message);
          return;
        }
        this.createFaces();
        // $uiMsg.success("创建成功！");
      });
    }
  }
}
</script>

<style scoped>

</style>
